<template>
    <div >
        <el-carousel  :height="config.height+'px'" :interval="config.time" indicator-position="none" >
            <el-carousel-item v-for="(item,index) in list" :key="index" >
                <div class="carousel-mian" :style="'background-image: url('+item.url+');'" @click="carouselHandler(index,item)">
                        <div class="carousel-item-mask">

                            <div class="item-text" >
                                {{ item.title }}
                            </div>
                        </div>
                
                </div>
                
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>
export default {

    data(){
        return{

            active:0,
            

        }
    },
    props:['list','config'],
    methods:{
        carouselHandler(index,data){
            this.$emit('handler',index,data);

        }
    },
    created(){
       
    },
    beforeDestroy(){
        // if(this.env!=null){
        //     clearInterval(this.timer)
        // }
    }

}
</script>

<style scoped>


.carousel-mian{
    cursor: pointer;
    width: 100%;
    height: 100%;
    background-position:center;
    background-size: 100% 100%;
    background-repeat:no-repeat;
   
    
}




.carousel-item-mask{
    /* position: fixed; */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    z-index: 1;
    

}

.item-text{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 40px;
    font-weight: 600;
    animation: fadeInUp 600ms;
    
}
h2{
    color: #fff;
}

</style>